<!DOCTYPE html>
<html>
<head>
	<title>H5工具制作</title>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="js/jp-zoom.js"></script>
	<script type="text/javascript" src="js/jp-measurement.js"></script>
</head>
<body>
	<div style="width: 100%;height: 600px;">
		<div style="width: 10%; height: 100%; float: left;position: relative;z-index: 110;">
			<button id="txt">文本</button>
			<button id="img">图片</button>
			<button id="attr">设置属性</button>
		</div>
		<div id="target" style="width: 80%; overflow: hidden; height: 100%; position: relative; float: left;">
		</div>	
	</div>
	<script type="text/javascript">
		$(function() {
			//创建文本控件
			$('#txt').jp_measurement({"target":"#target","type":"text","selected":function(attr){
				//console.log(attr);
			}});
			//创建图片控件
			$('#img').jp_measurement({"target":"#target","type":"img"});
			//设置属性
			$("#attr").click(function(){
				$('#txt').set_attr({"w":500,'h':100,'text':'bn','x':10,'y':10,'font-size':'64px','line-height':'74px','border':'3px solid red','border-radius':'10px'});
			});
		});

	</script>
</body>
</html>